<template>
  <main style="padding: 24px">
    <AgTable
    >
      <TableColumn
        v-if="showBatch"
        align="center"
        fixed="left"
        type="selection"
        width="80"
      />
      <TableColumn
        :label="t('资源名称')"
        fixed="left"
        prop="name"
        width="170"
      >
        <template #default="{ row }">
          <div class="resource-name">
            <div
              v-bk-tooltips="{ content: row?.name, placement: 'right', delay: 300, }"
              class="name"
              :class="[{ 'name-updated': row?.has_updated }]"
              @click="handleShowInfo(row.id)"
            >
              {{ row?.name }}
            </div>
            <div
              v-if="row?.has_updated"
              v-bk-tooltips="{ content: '资源已更新', placement: 'right', delay: 300, }"
              class="dot warning"
            />
          </div>
        </template>
      </TableColumn>
      <TableColumn
        :label="t('后端服务')"
        prop="backend_name"
        width="130"
      >
        <template #default="{ row }">
          {{ row?.backend?.name }}
        </template>
      </TableColumn>
      <TableColumn
        :filter="{
                  list: customMethodsList,
                  checked: chooseMethod,
                  filterFn: handleMethodFilter,
                  btnSave: false,
                }"
        :label="t('前端请求方法')"
        :show-overflow-tooltip="false"
        prop="method"
        width="130"
      >
        <template #default="{ row }">
          <BkTag :theme="METHOD_THEMES[row?.method]">
            {{ row?.method }}
          </BkTag>
        </template>
      </TableColumn>
      <TableColumn
        :label="t('前端请求路径')"
        prop="path"
      />
      <TableColumn
        :label="t('插件数')"
        prop="plugin_count"
        width="40"
      >
        <template #default="{ row }">
          <div
            class="plugin-num"
            @click="() => handleShowInfo(row.id, 'pluginManage')"
          >
            {{ row?.plugin_count }}
          </div>
        </template>
      </TableColumn>
      <TableColumn
        :label="t('文档')"
        prop="docs"
        width="80"
      >
        <template #default="{ row }">
          <section
            v-if="row?.docs?.length"
            @click="() => handleShowDoc(row)"
          >
                    <span class="document-info">
                      <AgIcon
                        name="document"
                        class="bk-icon"
                      />
                      {{ t('详情') }}
                    </span>
          </section>
          <section v-else>
            <span v-show="!row?.isDoc">--</span>
            <AgIcon
              v-show="row?.isDoc"
              v-bk-tooltips="t('添加文档')"
              name="plus"
              class="bk-icon plus-class"
              @click="() => handleShowDoc(row)"
            />
          </section>
        </template>
      </TableColumn>
      <TableColumn
        :filter="{
                  list: labelsList,
                  checked: chooseLabels,
                  filterFn: handleMethodFilter,
                  btnSave: false,
                }"
        :label="t('标签')"
        :show-overflow-tooltip="false"
        min-width="180"
        prop="labels"
      >
        <template #default="{ row }">
                  <span
                    v-if="!row?.isEditLabel"
                    class="text-warp"
                    @click="() => handleEditLabel(row)"
                  >
                    <span
                      v-if="row?.labels?.length"
                      v-bk-tooltips="{ content: tipsContent(row?.labelText), theme: 'light', placement: 'left' }"
                    >
                      <template
                        v-for="(item, index) in row?.labels"
                        :key="item.id"
                      >
                        <span
                          v-if="index < row.tagOrder"
                          class="ml-4px"
                        >
                          <BkTag @click="() => handleEditLabel(row)">
                            {{ item.name }}
                          </BkTag>
                        </span>
                      </template>
                      <BkTag
                        v-if="row.labels.length > row.tagOrder"
                        class="tag-cls"
                        @click="() => handleEditLabel(row)"
                      >
                        +{{ row.labels.length - row.tagOrder }}
                      </BkTag>
                    </span>
                    <span v-else>--</span>
                    <AgIcon
                      v-show="row?.isDoc"
                      name="edit-small"
                      class="icon edit-icon"
                      size="24"
                      @click="() => handleEditLabel(row)"
                    />
                  </span>
          <section
            v-else
            ref="selectCheckBoxParentRef"
          >
            <SelectCheckBox
              :cur-select-label-ids="curLabelIds"
              :labels-data="labelsData"
              :resource-id="resourceId"
              :width="selectCheckBoxParentRef?.offsetWidth"
              force-focus
              @close="(newLabelData) => {
                        handleCloseSelect(row, newLabelData)
                      }"
              @update-success="handleUpdateLabelSuccess"
              @label-add-success="getLabelsData"
            />
          </section>
        </template>
      </TableColumn>
      <TableColumn
        :label="t('更新时间')"
        sort
        prop="updated_time"
      />
      <TableColumn
        :label="t('操作')"
        fixed="right"
        prop="act"
        width="150"
      >
        <template #default="{ data }">
          <div class="flex gap-12px">
            <BkButton
              text
              theme="primary"
              @click="() => handleEditResource(data.id, 'edit')"
            >
              {{ t('编辑') }}
            </BkButton>
            <BkButton
              class="px-10px"
              text
              theme="primary"
              @click="() => handleEditResource(data.id, 'clone')"
            >
              {{ t('克隆') }}
            </BkButton>
            <BkPopConfirm
              :content="t('删除操作无法撤回，请谨慎操作')"
              :title="t('确认删除资源{resourceName}？', { resourceName: data?.name || '' })"
              trigger="click"
              width="288"
              @confirm="() => handleDeleteResource(data.id)"
            >
              <BkButton
                text
                theme="primary"
              >
                {{ t('删除') }}
              </BkButton>
            </BkPopConfirm>
          </div>
        </template>
      </TableColumn>
    </AgTable>
  </main>
</template>

<script setup lang="tsx">
import AgTable from '@/components/AgTable.vue';
import { type PrimaryTableProps, TableColumn } from '@blueking/tdesign-ui';
import { ref } from 'vue';

const columns: PrimaryTableProps['columns'] = [
  {
    colKey: 'row-select',
    type: 'multiple',
    width: 80,
    fixed: 'left',
  },
  {
    colKey: 'name',
    title: '资源名称',
    width: 170,
    fixed: 'left',
    cell: (h, { row }) => (
      <div class="resource-name">
        <div
          v-bk-tooltips="{ content: row.name, placement: 'right', delay: 300, }"
          class={['name', { 'name-updated': row.has_updated }]}
        >
          {row.name}
        </div>
        {row.has_updated
          ? <div
            v-bk-tooltips="{ content: '资源已更新', placement: 'right', delay: 300, }"
            class="dot warning"
          ></div>
          : ''
        }
      </div>
    ),
  },
  {
    title: '后端服务',
    width: 130,
    cell: (h, { row }) => (
      <div>
        {row.backend?.name}
      </div>
    ),
  },
];

const getData = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        count: 11,
        results: [
          { id: 1, name: 'John Doe', age: 38 },
          { id: 2, name: 'Alice Smith', age: 25 },
          { id: 3, name: 'Bob Johnson', age: 52 },
          { id: 4, name: 'Emma Brown', age: 29 },
          { id: 5, name: 'Mike Lee', age: 44 },
          { id: 6, name: 'John Smith', age: 33 },
          { id: 7, name: 'Alice Johnson', age: 47 },
          { id: 8, name: 'Bob Brown', age: 21 },
          { id: 9, name: 'Emma Lee', age: 59 },
          { id: 10, name: 'Mike Doe', age: 31 },
          { id: 11, name: 'John Brown', age: 27 },
        ],
      })
    }, 1000)
  })
}

</script>

<style scoped lang="scss">

</style>
